<template>
  <p-modal
    :title="handle === 'add'?'新增':'编辑'"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    :wrapClassName="'siteComponentListModal'"
    @cancel="handleCancel"
  >
    <p-spin :spinning="confirmLoading">
      <p-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
      >
      <p-form-model-item label="组件编号" prop="modulecode">
        <p-select v-model="form.modulecode" show-search @change="modulecodeChange">
          <p-select-option :value="item.value" v-for="(item, index) in modulecodeList" :key="item.value">
            {{item.value}}
          </p-select-option>
        </p-select>
        <!-- <p-input
          placeholder="请输入内容"
          v-model="form.modulecode"
        /> -->
      </p-form-model-item>
      <p-form-model-item label="组件名称" prop="modulename">
        <p-input disabled
          placeholder="请输入内容"
          v-model="form.modulename"
        />
      </p-form-model-item>
      <p-form-model-item label="组件描述" prop="modulesprc">
        <p-input
          placeholder="请输入内容"
          v-model="form.modulesprc"
        />
      </p-form-model-item>
      <p-form-model-item label="组件类别" prop="moduletype">
        <p-select v-model="form.moduletype">
          <p-select-option :value="item.value" v-for="(item, index) in moduletypeList" :key="item.value">
            {{item.text}}
          </p-select-option>
        </p-select>
      </p-form-model-item>
      <p-form-model-item label="组件数量" prop="quantity">
        <p-input-number style="width: 100%;"
          placeholder="请输入内容"
          :min="1"
          v-model="form.quantity"
        />
      </p-form-model-item>
      <p-form-model-item label="配送使用工站" prop="distributeStationCode">
        <p-tree-select
          v-model="form.distributeStationCode"
          show-search
          @change="treeChange"
          :replaceFields="replaceFields"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="请选择"
          :tree-data="treeData"
          allow-clear
          tree-default-expand-all
        />
      </p-form-model-item>
      <p-form-model-item label="是否生成条码打印" prop="codePrint">
        <p-select v-model="form.codePrint">
          <p-select-option :value="item.value" v-for="item in codePrintList" :key="item.value">
            {{item.label}}
          </p-select-option>
        </p-select>
      </p-form-model-item>
    </p-form-model>
    </p-spin>
  </p-modal>
</template>

<script>
import mesPeProcess from "@/api/mesPeProcess";
import _ from "lodash";
export default {
  name: "siteSourceModal",
  components: {
  },
  data() {
    return {
      handle: '',
      width: 500,
      visible: false,
      model: {},
      confirmLoading: false,
      modulecodeList: [],
      replaceFields: {
        children:'children', 
        title:'showName', 
        value:'processmcode',
        key:'processmcode',
      },
      moduletypeList: [
        {
          label: 'label',
          value: 'label',
        },
      ],
      codePrintList: [
        {
          label: '是',
          value: 1,
        },
        {
          label: '否',
          value: 2,
        },
      ],
      form: {
        modulename: '',
        moduletype: '',
        modulesprc: '',
        modulecode: '',
        quantity: '',
        codePrint: '',
        showName: '',
        distributeStationCode: '',
        distributeStationName: '',
        processmname: '',
      },
      rules: {
        modulename: [
          { required: true, message: '请选择', trigger: 'blur' },
        ],
        moduletype: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        /* modulesprc: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ], */
        modulecode: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        codePrint: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        distributeStationCode: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        quantity: [
          { required: true, validator: this.validator, trigger: 'blur' },
        ],
      },
    };
  },
  watch: {
  },
  computed: {
    treeData(){
      const curData = _.cloneDeep(this.$parent.$parent.allTreeData);
      curData.forEach( ele =>{
        ele.disabled = true;
        // ele.realKey = `${ele.processmcode}-${ele.processmname}`
        ele.children.forEach( el =>{
          el.disabled = true;
          // el.realKey = `${el.processmcode}-${el.processmname}`
          el.children.forEach( e =>{
            e.realKey = `${e.processmcode}-${e.processmname}`
          });
        });
      });
      return curData;
    },
  },
  created() {
    this.sysDictItem();
  },
  methods: {
    validator(rule, value, callback){
      if (value === '' || value === null) {
        callback(new Error('请输内容'));
      } else if (!(/^[1-9]\d*$/.test(value))) {
        callback(new Error("只能输入正整数"));
      } else {
        callback();
      }
    },
    modulecodeChange(val){
      this.form.modulename = this.modulecodeList.find( e => e.value === val).text;
    },
    sysDictItem(){
      mesPeProcess.sysDictItem('mes_moduletype').then( res =>{
        if( res.code === 0 ){
          this.moduletypeList = res.data || [];
        }
      });
      mesPeProcess.sysDictItem('mes_module_code').then( res =>{
        if( res.code === 0 ){
          this.modulecodeList = res.data || [];
        }
      });
    },
    treeChange(value, label, extra){
      // 名称
      this.form.showName = label[0];
      this.form.distributeStationName = label[0];
    },
    handleOk(){
      const that = this;
      that.$refs.ruleForm.validate(valid => {
        if (valid) {
          if ( that.handle === 'add' ){
            that.form.id = new Date().getTime();
            that.$parent.options.push(_.cloneDeep(that.form));
          }else {
            const index = that.$parent.options.findIndex( el => el.id === that.form.id);
            that.$parent.options.splice(index,1,_.cloneDeep(that.form))
          }
          that.$parent.optionsCopy = _.cloneDeep(that.$parent.options);
          that.visible = false;
        }
      });
    },
    handleCancel(){
      this.visible = false;
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less">
  .siteComponentListModal {
    .poros-form .poros-form-item{
      display: flex;
    }
     .poros-form-item-label{
       width: 136px;
     }
  }
</style>

